<template>
	<view class="content">
	<!--pages/home/home.uniml-->
	<view class="page_title">
	  <view class="page_name">暖余生</view>
	</view>
	<scroll-view scroll-y class="scroll">
	  <view class="banxin">
		<view class="welcome">
		  <view class="avatar">
			<image :src="avatar" mode=""/>
		  </view>
		  <view class="info">
			<text class="user_name">{{name}}
			</text>
			<text class="welcome_info">欢迎使用暖余生线上牵线小程序</text>
		  </view>
		  <view class="inform" @click="hangleInform">
			<image src="/static/img/inform.png" mode=""/>
			<view v-if="msgList.length!=0" class="msg">{{msgList.length}}</view>
		  </view>
		</view>

		<view class="banner">
		  <image src="/static/img/banner.png" mode=""/>
		</view>
		<view class="menus">
		  <view class="menu" @click="handleAuth">
			<image src="/static/img/authentication.png" mode=""/>
			诚信认证
		  </view>
		  <view class="menu" @click="handleSelection">
			<image src="/static/img/selection.png" mode=""/>
			线上互选
		  </view>
		  <view class="menu" @click="handleCustomize">
			<image src="/static/img/custom.png" mode=""/>
			私人订制
		  </view>
		  <view class="menu" @click="handleStringing">
			<image src="/static/img/stringing.png" mode=""/>
			我的牵线
		  </view>
		</view>
	  </view>
	  <view class="activitys">
		<view class="title">
		  <image src="/static/img/address.png" mode=""/>
		  线下活动
		</view>
		<scroll-view 	scroll-x class="scroll-x" scroll-with-animation :scroll-left="scrollLength">
		  <view class="activity_list" bind:touchmove="handleTouchmove" bind:touchstart="handleTouchstart" bind:touchend="handleTouchend">
			<view class="activity" v-for="item in activityList" key="index">
			  <image :src="item.image1" mode=""/>
			  <view class="activity_name">
				<view class="name"> {{item.name}} </view>
				<view class="join" @click="handleActivity(item.id)">
				  立即参与
				</view>
			  </view>
			  <view class="apply">
				<image src="/static/img/apply.png" mode=""/>
				已有超过{{item.manCount+item.womenCount}}人报名
			  </view>
			</view>
		  </view>
		</scroll-view>
	  </view>
	</scroll-view>
	<!-- <tab-bar activeWay='home'></tab-bar> -->

	</view>
</template>

<script>
	import request from '@/utils/request.js'
	
	export default {
		data() {
			return {
				userDetails:{},
				name:uni.getStorageSync('name'),
				avatar:uni.getStorageSync('avatar'),
				msgList:[],
				activityList: [],
				scrollLength:0,
				flag: 0,
				lastX: 0,
				lastY: 0
			}
		},
		onLoad() {
			if(!uni.getStorageSync('token')){
			  uni.redirectTo({
				url: '/pages/userInfo/loginWay/loginWay'
			  })
			  return
			}
			this.initInfo()
			this.initMsg()
			this.initActivity()
		},
		methods: {
		  initInfo(){
			let that = this
			request(`/employee/${uni.getStorageSync('id')}`).then((res)=>{
			  // console.log(res.data.data,'initInfo');
			  let userDetails = res.data.data
			  that.setData({
				userDetails:userDetails,
			  })
			  uni.setStorageSync('number', userDetails.number)
			  console.log(this.data.userDetails,'userDetails');
			})
		  },
		  initMsg(){
			request(`/bridge/toMyBridge`).then((res)=>{
			  console.log(res.data.data,'initMsg');
			  this.setData({
				msgList:res.data.data
			  })
			})
		  },
		  initActivity(){
			let that = this
			request(`/activity/list`).then((res)=>{
			  console.log(res.data.data,'initActivity');
			  that.setData({
				activityList : res.data.data
			  })
			})
		  },
		  handleAuth(){
			if(!uni.getStorageSync('token')){
			  uni.redirectTo({
				url: '/pages/login/login'
			  })
			  return
			}
			uni.navigateTo({
			  url: '/pages/auth/auth'
			})
		  },
		  handleSelection(){
			if(!uni.getStorageSync('token')){
			  uni.redirectTo({
				url: '/pages/login/login'
			  })
			  return
			}
			uni.navigateTo({
			  url: '/pages/selection/selection'
			})
		  },
		  handleCustomize(){
			uni.navigateTo({
			  url: '/pages/customize/customize'
			})
		  },
		  handleStringing(){
			if(!uni.getStorageSync('token')){
			  uni.redirectTo({
				url: '/pages/login/login'
			  })
			  return
			}
			uni.navigateTo({
			  url: '/pages/stringing/stringing'
			})
		  },
		  hangleInform(){
			if(!uni.getStorageSync('token')){
			  uni.redirectTo({
				url: '/pages/login/login'
			  })
			  return
			}
			uni.navigateTo({
			  url: '/pages/stringing/stringing?type=come'
			})
		  },
		  handleActivity(id){
			if(!uni.getStorageSync('token')){
			  uni.redirectTo({
				url: '/pages/login/login'
			  })
			  return
			}
			uni.navigateTo({
			  url: `/pages/activity/activity?id=${id}`
			})
		  },
		  handleTouchstart: function (e) {
			this.flag = 0;
			this.lastX = e.changedTouches[0].pageX;
			this.lastY = e.changedTouches[0].pageY;
		  },
		  handleTouchmove: function (e) {
			if (this.flag !== 0) {
			  return;
			}
			let currentX = e.changedTouches[0].pageX;
			let currentY = e.changedTouches[0].pageY;
			let tx = currentX - this.lastX;
			let ty = currentY - this.lastY;
			//左右方向偏移大于上下偏移认为是左右滑动
			if (Math.abs(tx) - Math.abs(ty) > 5) {
			  console.log("cc")
			  // 向左滑动
			  if (tx < 0) {
				// 如果到最右侧
				console.log('向左滑动');
				this.flag = 1;
				if(this.scrollLength>=(this.activityList.length-1)*500){
				  return
				}
				this.setData({
				  scrollLength:this.scrollLength + 500,
				})
				console.log(this.scrollLength,'this.scrollLength');
			  }
			  // 向右滑动 
			  else if (tx > 0) {
				// 如果到最左侧
				this.flag = 2;
				console.log('向右滑动');
				if(this.scrollLength<=0){
				  return
				}
				this.setData({
				  scrollLength:this.scrollLength - 500,
				})
				console.log(this.scrollLength,'this.scrollLength');
			  }
			}
			//上下方向滑动
			else {
			  if (ty < 0) {
				//向上滑动
				console.log("向上滑动")
				this.flag = 3;
			  } else if (ty > 0) {
				//向下滑动
				console.log("向下滑动")
				this.flag = 4;
			  }
			}
			//将当前坐标进行保存以进行下一次计算
			this.lastX = currentX;
			this.lastY = currentY;
		  },
		  handleTouchend: function (e) {
			this.flag = 0
		  },
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* pages/home/home.wxss */
	page{
	  background-color: rgba(249, 249, 249, 1);
	}

	.page_title{
	  height: 300rpx;
	}
	.welcome{
	  display: flex;
	  // width: 80%;
	  margin: 0 auto;
	  align-items: center;
	  justify-content: space-around;
	  background-color: #fff;
	  // margin-top: -100rpx;
	  border-radius: 60rpx;
	  padding: 30rpx;
	  .avatar image{
		border-radius: 50%;
	  }
	  image{
		width: 90rpx;
		height: 90rpx;
		display: block;
	  }
	  .info{
		height: 100rpx;
		// background-color: rgb(163, 92, 92);
		.user_name{
		  display: block;
		  font-weight: 500;
		  line-height: 54rpx;
		  color: rgba(51, 51, 51, 1);
		  max-width: 200rpx;
		  white-space: nowrap; /* 确保文本在一行内显示 */
		  overflow: hidden; /* 隐藏溢出的内容 */
		  text-overflow: ellipsis; 
		  margin-right: 20rpx;
		}
		.welcome_info{
		  font-size: 12px;
		  line-height: 50rpx;
		  color: rgba(166, 166, 166, 1);
		}
	  }
	  .inform{
		position: relative;
		.msg{
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 26rpx;
		  height: 26rpx;
		  font-size: 8px;
		  line-height: 26rpx;
		  text-align: center;
		  color: aliceblue;
		  border-radius: 50%;
		  background-color: #FF4F4F;
		}
	  }
	}

	.banner{
	  display: flex;
	  margin-top: 30rpx;
	  image{
		// width: 500rpx;
		width: 100%;
		margin: 0 auto;
		height: 300rpx;
	  }
	}

	.menus{
	  display: flex;
	  width: 100%;
	  justify-content: space-between;
	  margin: 30rpx auto;
	  .menu{
		text-align: center;
		font-size: 12px;
		line-height: 34rpx;
		color: rgba(102, 102, 102, 1);
		image{
		  display: block;
		  width: 120rpx;
		  height: 120rpx;
		  margin-bottom: 10rpx;
		}
	  }
	}
	.activitys{
	  margin-top: 60rpx;
	  .title{
		padding-left: 7.5vw;
		display: flex;
		align-items: center;
		font-weight: 500;
		image{
		  width: 32rpx;
		  height: 32rpx;
		  margin-right: 12rpx;
		}
	  }
	  .scroll-x{
		display: flex;
		flex-shrink: 0;
		flex-wrap: nowrap;
		// background-color: rgb(71, 167, 68);
	  }
	  .activity_list{
		width: 100%;
		padding-left: 7.5vw;
		// overflow:hidden;
		display: flex;
		flex-shrink: 0;
		flex-wrap: nowrap;
		.activity{
		  min-width: 400rpx;
		  padding: 30rpx;
		  margin-right: 30rpx;
		  border-radius: 40rpx;
		  margin-top: 30rpx;
		  background-color: rgb(255, 255, 255);
		  image{
			width: 100%;
			height: 260rpx;
			border-radius: 20rpx;
		  }
		  .activity_name{
			display: flex;
			color: rgba(51, 51, 51, 1);
			margin-top: 20rpx;
			font-size: 18px;
			font-weight: 500;
			align-items: center;
			justify-content: space-between;
			.name{
			  max-width: 200rpx;
			  white-space: nowrap; /* 确保文本在一行内显示 */
			  overflow: hidden; /* 隐藏溢出的内容 */
			  text-overflow: ellipsis; 
			  margin-right: 20rpx;
			}
			.join{
			  font-size: 12px;
			  padding:12rpx 30rpx;
			  color: white;
			  border-radius: 60rpx;
			  background-color:  rgba(156, 156, 255, 1);
			}
		  }
		  .apply{
			display: flex;
			font-size: 12px;
			margin-top: 10rpx;
			color: rgba(156, 156, 255, 1);
			align-items: center;
			image{
			  width: 110rpx;
			  height: 48rpx;
			  margin-right: 10rpx;
			}
		  }
		}
	  }
	}
</style>
